<template>
  <div>
    <HeaderStatus></HeaderStatus>
    <div class="mui-content" style="padding-top:44px;background-color:#fff;">
      <div class="top_position"><i class="iconfont icon-dingwei"></i>
      <span style="color:#00a0e9">{{$store.state.account.community.name}}</span>
      <!-- [切换] -->
      </div>
      <!-- banner -->
      <div class="mui-slider" id="shop_home_banner">
        <div class="mui-slider-group">
          <div class="mui-slider-item" v-for="(i,k) in banner_list" :key="k">
            <img :src="i.pic" />
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator" v-for="(i,k) in banner_list" :key="k"></div>
        </div>
      </div>
      <!-- 特惠专区 -->
      <div class="title_line">
        <img src="../../assets/images/home_lv2/1_03.gif" alt="">
      </div>
      <div class="two_panel">
        <router-link to="/shop/goods_list?type=youxiangtemai">
          <div class="left"><img :src="shop_home_model_pic1" alt=""></div>
        </router-link>
        <router-link to="/shop/group_list">
        <div class="right"><img :src="shop_home_model_pic2" alt=""></div>
        </router-link>
      </div>
      <!-- 精品专区 -->
      <div class="title_line">
        <img src="../../assets/images/home_lv2/1_11.gif" alt="">
      </div>

      <div class="goods_panel_large" style="display: none;" @tap="go_goods_detail(large_goods_info.goodsid)">
        <div class="goods_img"><img :src="large_goods_info.pic" alt=""></div>
        <div class="goods_title">{{large_goods_info.name}}</div>
        <div class="goods_price">￥{{large_goods_info.min_price}}</div>
      </div>

      <div class="goods_list">

        <div class="goods_panel_small" v-for="(i,k) in goods_list" :key="k" @tap="go_goods_detail(i.goodsid)">
          <div class="goods_img"><img :src="i.pic" alt=""></div>
          <div class="goods_title">{{i.name}}</div>
          <div class="goods_price">￥{{i.min_price}}</div>
        </div>

      </div>


      <br><br><br><br> <br>
      <div class="bottom_text">到底了</div>
     <br>
      <br><br>
    </div>
  </div>
</template>
<script>
import HeaderStatus from "../../components/Header";
import goods_ajax from "../../ajax/goods_ajax";
import home_ajax from "../../ajax/home_ajax";
import goods_class_ajax from "../../ajax/goods_class_ajax";
export default {
  created() {
    this.$store.commit("change_header", {
      header_text: "广电小店",
      header_right_func: false,
      header_right_html: "<span></span>",
      header_back_btn: true
    });
    this.shop_home_data_init();
  },
  data() {
    return {
      banner_list: [],
      first_banner: "",
      last_banner: "",
      shop_home_menu: [],
      goods_list: [],
      shop_home_model_pic: [],
      shop_home_model_pic1:'',
      shop_home_model_pic2:'',
      shop_home_chanel_names: "",
      large_goods_info:'',
      page_num:1,
    };
  },
  methods: {
    go_goods_detail(goodsid) {
        this.$router.push("/shop/goods_list/goods?goodsid=" + goodsid)
    },
    shop_home_data_init() {
      // 获取商城banner图
      goods_ajax.get_shop_banner(
        {
          bid: this.$store.state.account.community.sqid,
          type: 1
        },
        res => {
          if (res.length > 0) {
            this.banner_list = res;
            this.first_banner = res[0];
            this.last_banner = res[res.length - 1];
          }
          setTimeout(()=>{
            //获得slider插件对象
            var gallery = mui("#shop_home_banner");
            gallery.slider({
              interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
            });
          },1000)
        }
      );

      goods_class_ajax.get_goods_class_lv1(
        {
          bid: this.$store.state.account.community.sqid
        },
        res => {
          if (res.length > 0) {
            this.shop_home_menu = res;
            this.$store.commit("updata_class_list", res);
            this.$store.commit("updata_shop_home_chanel_names",res)
          }
        }
      );
      // 获取商城首页商品信息
      goods_ajax.get_shop_home_goods(
        {
          bid: this.$store.state.account.community.sqid,
          type: 2,
          page:this.page_num
        },
        res => {
          
          if (res.length > 0) {
          
            // this.large_goods_info  = res[0];
            //删除第一条数据
            // res.splice(0,1)
            this.goods_list = res;
          }
        }
      );
      // 获取商城首页的特卖 拼团 模块图片
      home_ajax.get_shop_home_model_pic(
        {
          bid: this.$store.state.account.community.sqid
        },
        res => {
          res[0].link = "/shop/goods_list?type=youxiangtemai";
          res[1].link = "/shop/group_list";
          this.shop_home_model_pic = res;
          this.shop_home_model_pic1 = res[0].url
          this.shop_home_model_pic2 = res[1].url
          console.log(res)
          this.$store.commit("updata_shop_home_chanel_names", res);
        }
      );
      // 获取栏目名称
      home_ajax.get_shop_home_chanel_name(
        {
          bid: this.$store.state.account.community.sqid
        },
        res => {
          this.shop_home_chanel_names = res;
        }
      );
    }
  },
  components: {
    HeaderStatus
  },
  mounted() {

  }
};
</script>
<style lang="less" scoped>
@import "../../../static/pxvalue.less";
.top_position {
  font-size: @p24;
  padding-left: @p20;
  padding-top: @p20;
  padding-bottom: @p10;
}
.title_line {
  width: 100%;
  img {
    width: 100%;
  }
}
.two_panel {
  width: 100%;
  .left,
  .right {
    width: 48.5%;
    float: left;
    text-align: center;
    margin-left: 1%;
    img {
      width: 100%;
    }
  }
}
.goods_panel_large {
  width: @p680;
  margin-left: @p35;
  .goods_img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .goods_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: @p26;
  }
  .goods_price {
    color: #00a0e9;
    font-size: @p28;
    padding-left: @p20;
  }
}
.goods_list {
  width: @p680;
  margin-left: @p35;
  overflow: hidden;

  .goods_panel_small {
    width: @p330;
    float: left;
    overflow: hidden;
    margin-bottom: @p30;
    .goods_img {
      width: 100%;
      height: @p330;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .goods_title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: @p26;
    }
    .goods_price {
      color: #00a0e9;
      font-size: @p28;
      padding-left: @p10;
    }
  }
  .goods_panel_small:nth-child(even) {
    margin-left: @p16;
  }
}
.bottom_text {
  text-align: center;
  font-size: @p22;
  color: #888;
}
</style>

